<template>
	<view class="orderdetail2">
		<view class="orderdetail2-top">
			<view class="orderdetail2-top-part">
				<view class="orderdetail2-top-part-top">
					<view class="orderdetail2-top-part-top-left">
						<image src="../static/20221011165448.jpg" mode="widthFix" style="width: 164rpx;"></image>
					</view>
					<view class="orderdetail2-top-part-top-right">
						<view class="orderdetail2-top-part-top-right-title">
							<text>测试商品</text>
						</view>
						<view class="orderdetail2-top-part-top-right-part">
							<text>套餐：128G 灰色</text>
						</view>
						<view class="orderdetail2-top-part-top-right-part">
							<text>租期：2022.12.12-2022.12.12</text>
						</view>
						<view class="orderdetail2-top-part-top-right-bottom">
							<text>总租金：36.30元（分12期）</text>
							<text style="margin-right: 20rpx;">x1</text>
						</view>
					</view>
				</view>
				<view class="orderdetail2-top-part-botton">
					<view class="orderdetail2-top-part-botton-part">
						<view class="orderdetail2-top-part-botton-part-top">
							<text>36.00元</text>
						</view>
						<view class="orderdetail2-top-part-botton-part-bottom">
							<text>应付租金(元)</text>
						</view>
					</view>
					<view class="orderdetail2-top-part-botton-part">
						<view class="orderdetail2-top-part-botton-part-top">
							<text>36.00元</text>
						</view>
						<view class="orderdetail2-top-part-botton-part-bottom">
							<text>应付租金(元)</text>
						</view>
					</view>
					<view class="orderdetail2-top-part-botton-part">
						<view class="orderdetail2-top-part-botton-part-top">
							<text>36.00元</text>
						</view>
						<view class="orderdetail2-top-part-botton-part-bottom">
							<text>应付租金(元)</text>
						</view>
					</view>
				</view>
			</view>
		</view>
<!-- 		<view class="orderdetail2-connet">
			<view class="orderdetail2-connet">
				
			</view>
		</view> -->
		<view class="orderdetail2-part">
			<view class="orderdetail2-part-connet">
				<view class="orderdetail2-part-connet-list" style="border-bottom: #7f7f7f solid 2rpx ; padding-top: 10rpx; padding-bottom: 10rpx;">
					<text>1/12</text>
					<text>已退款</text>
				</view>
				<view style="width: 100%; height: 20rpx;"></view>
				<view class="orderdetail2-part-connet-list">
					<text>1/12</text>
					<text>已退款</text>
				</view>
				<view class="orderdetail2-part-connet-list">
					<text>1/12</text>
					<text>已退款</text>
				</view>
				<view class="orderdetail2-part-connet-list">
					<text>1/12</text>
					<text>已退款</text>
				</view>
				<view class="orderdetail2-part-connet-list">
					<text>1/12</text>
					<text>已退款</text>
				</view>
				<view style="width: 100%; height: 20rpx;border-bottom: #7f7f7f solid 2rpx ;"></view>
				<view class="orderdetail2-part-connet-list">
					<text>1/12</text>
					<text>已退款</text>
				</view>
				<view class="orderdetail2-part-connet-list">
					<text>1/12</text>
					<text>已退款</text>
				</view>
			</view>
		</view>
		<view class="orderdetail2-part2">
			<view class="orderdetail2-part2-connet">
				<view class="orderdetail2-part-connet-list" style="color: black; border-bottom: #7f7f7f solid 2rpx;padding-top: 10rpx; padding-bottom: 10rpx;">
					<view class="">
						<radio :checked="checkedvalue"  @click="checked" color="red"/>
						<text>2/12</text>
					</view>
					<text>未支付</text>
				</view>
				<view style="width: 100%; height: 20rpx;"></view>
				<view class="orderdetail2-part-connet-list">
					<text  style="color: black;">2/12</text>
					<text>未支付</text>
				</view>
				<view class="orderdetail2-part-connet-list">
					<text  style="color: black;">2/12</text>
					<text>未支付</text>
				</view>
				<view class="orderdetail2-part-connet-list">
					<text  style="color: black;">2/12</text>
					<text>未支付</text>
				</view>
			</view>
		</view>
		<view style="width: 100%; height: 40rpx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checkedvalue:false
			}
		},
		methods: {
			checked(){
				this.checkedvalue = ! this.checkedvalue
			}
		}
	}
</script>

<style>
	page{
		width: 100%;
		height: 100%;
		background-color: #f7f7f7;
	}
	.orderdetail2{
		width: 100%;
		height: 100%;
	}
	.orderdetail2-top{
		width: 100%;
		height: 400rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: white;
	}
	.orderdetail2-top-part{
		width: 90%;
		height: 80%;
	
		border-radius: 12rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}
	.orderdetail2-top-part-top{
		width: 100%;
		height: calc( 100% - 120rpx );
		display: flex;
		justify-content: center;
		border-bottom: #7f7f7f solid 2rpx;
	}
	.orderdetail2-top-part-top-left{
		width: 164rpx;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.orderdetail2-top-part-top-right{
		width: calc( 100% - 164rpx );
		height: 100%;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}
	.orderdetail2-top-part-top-right-title{
		width: 100%;
		height: 25%;
		font-size: 28rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.orderdetail2-top-part-top-right-part{
		width: 100%;
		height: 25%;
		font-size: 24rpx;
		color: #7f7f7f;
	}
	.orderdetail2-top-part-top-right-bottom{
		width: 100%;
		height: 25%;
		font-size: 32rpx;
		display: flex;
		justify-content: space-between;
	}
	.orderdetail2-top-part-botton{
		width: 100%;
		height: 120rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.orderdetail2-top-part-botton-part{
		width: 30%;
		height: 100%;
	}
	.orderdetail2-top-part-botton-part-bottom{
		width: 100%;
		height: 50%;
		display: flex;
		justify-content: center;
		align-items: flex-start;
		font-size: 28rpx;
		color: #7f7f7f;
	}
	.orderdetail2-top-part-botton-part-top{
		width: 100%;
		height: 50%;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		font-size: 28rpx;
	}
	.orderdetail2-part{
		width: 90%;
		height: 504rpx;
		background-color: #efefef;
		margin: auto;
		margin-top: 20rpx;
		display: flex;
		justify-content: center;
	}
	.orderdetail2-part-connet{
		width: 92%;
		height: 100%;
	}
	.orderdetail2-part-connet-list{
		width: 100%;
		height: 60rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #7f7f7f;
		font-size: 28rpx;
	}
	.orderdetail2-part2{
		width: 90%;
		height: 280rpx;
		background-color: white;
		margin: auto;
		margin-top: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 12rpx;
	}
	.orderdetail2-part2-connet{
		width: 92%;
		height: 100%;

	}
</style>
